<template>
  <div v-if="showMask" class="page-guide">
    <div class="help-step-mask"></div>
    <guide-step
      id="guideStep"
      :visible="showMask && !!stepInfo"
      :steps="steps"
      :step="curStep"
      :info="stepInfo"
      :position="stepInfo.position"
      @next-step="nextStep"
      @close-step="closeStep"
      @restart-step="restartStep"></guide-step>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import GuideStep from '@com/GuideStep.vue'
export default {
  name: 'PageGuide',
  components: { GuideStep },
  props: {},
  data() {
    return {
      showMask: false,
      curStep: 1,
      steps: 6,
      stepInfo: null,
      stepsInfo: {
        1: {
          step: 1,
          title: '指标考核模型',
          desc: '首先，在“考核模型管理”中配置绩效考核指标。可以从履职能力和履职效果两个维度进行指标设置，建立科学的绩效指标考核体系。',
          img: '',
          position: null,
          iconInfo: {
            icon: 'iconfont kh-arrow-left',
            style: { top: '0px', left: '-55px' },
          },
        },
        2: {
          step: 2,
          title: '指标配置',
          desc: '然后，点击“立即配置”新建绩效指标考核模型。系统提供科学的绩效考核指标体系，可直接勾选使用，也可以从空白新建。',
          img: '',
          position: null,
          iconInfo: {
            icon: 'iconfont kh-arrow-bottom',
            style: { bottom: '-55px', left: 'calc(50% - 24px)' },
          },
        },
        3: {
          step: 3,
          title: '考核单位管理',
          desc: '接着，进入“考核单位管理”页面，在该页面中添加考核单位（考核对象）及关联账号。',
          img: '',
          position: null,
          iconInfo: {
            icon: 'iconfont kh-arrow-left',
            style: { top: '0px', left: '-55px' },
          },
        },
        4: {
          step: 4,
          title: '添加单位',
          desc: '点击“添加单位”，填写单位名称、单位类型、账号、负责人、负责人手机号、密码等相关信息。账号、手机号都可以作为系统登录账号。',
          img: '',
          position: null,
          iconInfo: {
            icon: 'iconfont kh-arrow-top',
            style: { top: '-55px', right: 65 - 24 + 'px' },
          },
        },
        5: {
          step: 5,
          title: '考核方案',
          desc: '模型和考核单位设置完成后，进入“考核方案管理”页面，对考核方案进行设置。',
          img: '',
          position: null,
          iconInfo: {
            icon: 'iconfont kh-arrow-left',
            style: { top: '0px', left: '-55px' },
          },
        },
        6: {
          step: 6,
          title: '发起考核',
          desc: '最后，点击“发起考核”，对基本信息、考核类型与模板、考核流程设置等进行个性化设置，发起考核方案',
          img: '',
          position: null,
          iconInfo: {
            icon: 'iconfont kh-arrow-top',
            style: { top: '-55px', right: 65 - 24 + 'px' },
          },
        },
        7: {
          step: 7,
          title: '管理考核',
          desc: '点击考核方案名称，对绩效考核进行全流程管理。包括指标内容审核、分数校准、报告审核等。',
          img: '',
          position: null,
          iconInfo: {
            icon: 'iconfont kh-arrow-top',
            style: { top: '-55px', right: 65 - 24 + 'px' },
          },
        },
      },
    }
  },
  computed: {
    ...mapGetters(['loginCount']),
    ...mapGetters('role', ['isMainRole']),
  },
  watch: {},
  created() {},
  mounted() {
    window.addEventListener('resize', this.setPosition)
    this.nextStep(1)
  },
  methods: {
    // openGuide() {
    //   if (localStorage.ZB_LOGIN_COUNT === undefined) {
    //     setTimeout(() => {
    //       this.openGuide()
    //     }, 500)
    //   } else {
    //     if (this.isMainRole && localStorage.pskh_userId && this.loginCount < 2) {
    //       setTimeout(() => {
    //         this.nextStep(1)
    //       }, 500)
    //     }
    //   }
    // },
    setPosition() {
      let marginGap = 100
      // if (window.innerWidth) {
      //   winWidth = window.innerWidth
      // } else if (document.body && document.body.clientWidth) {
      //   winWidth = document.body.clientWidth
      // }
      if (window?.matchMedia('(max-width:1360px)')?.matches) {
        marginGap = 20
      } else if (window?.matchMedia('(max-width:1620px)')?.matches) {
        marginGap = 50
      } else {
        marginGap = 100
      }
      console.log(marginGap)

      const idStr = `guide-step-${this.curStep}`
      const stepEl = document.getElementById(idStr)
      if (!stepEl) {
        return false
      }
      let top = 0
      let left = 0
      if (this.curStep === 1) {
        top = stepEl.offsetTop + 72 + 'px'
        left = stepEl.offsetLeft + stepEl.clientWidth + 60 + 'px'
      } else if (this.curStep === 2) {
        if (stepEl.classList.contains('empty-btn')) {
          this.stepsInfo[this.curStep].desc =
            '然后，点击“立即配置”新建绩效指标考核模型。系统提供科学的绩效考核指标体系，可直接勾选使用，也可以从空白新建。'
          top = stepEl.offsetTop + 72 - 320 + 'px'
          left = stepEl.offsetLeft + 260 - 200 + 'px'
          this.stepsInfo[this.curStep].iconInfo = {
            icon: 'iconfont kh-arrow-bottom',
            style: { bottom: '-55px', left: 'calc(50% - 24px)' },
          }
        } else {
          this.stepsInfo[this.curStep].desc =
            '然后，点击“新建履职能力模型”按钮，新建绩效指标考核模型。系统提供科学的绩效考核指标体系，可直接勾选使用，也可以从空白新建。'
          top = stepEl.offsetTop + 72 + 90 + 'px'
          left = stepEl.offsetLeft + 260 + stepEl.clientWidth - 400 + 'px'
          this.stepsInfo[this.curStep].iconInfo = {
            icon: 'iconfont kh-arrow-top',
            style: { top: '-55px', right: '24px' },
          }
        }

        // }
      } else if (this.curStep === 3) {
        top = stepEl.offsetTop + 72 + 'px'
        left = stepEl.offsetLeft + stepEl.clientWidth + 60 + 'px'
      } else if (this.curStep === 4) {
        top = stepEl.offsetTop + 72 + 170 + 'px'
        left = stepEl.offsetLeft + 260 + marginGap + 'px'
      } else if (this.curStep === 5) {
        top = stepEl.offsetTop + 72 + 'px'
        left = stepEl.offsetLeft + stepEl.clientWidth + 60 + 'px'
      } else if (this.curStep === 6) {
        top = (stepEl.offsetTop < 0 ? 0 : stepEl.offsetTop) + 72 + 107 + 'px'
        left = stepEl.offsetLeft + 260 + marginGap - 400 + stepEl.clientWidth + 'px'
      } else {
        top = '50%'
        left = '50%'
      }
      this.stepsInfo[this.curStep].position = {
        top,
        left,
      }
      this.stepInfo = this.stepsInfo[this.curStep]
    },
    setStepElStyle(bool) {
      const stepEls = document.querySelectorAll('.guide-step')
      if (stepEls && stepEls.length) {
        for (let i = 0; i < stepEls.length; i++) {
          stepEls[i].style = null
        }
        if (bool) {
          const idStr = `guide-step-${this.curStep}`
          const stepEl = document.getElementById(idStr)
          stepEl.style.zIndex = 100
          stepEl.style.backgroundColor = '#fff'
          stepEl.style.borderRadius = '6px'
        }
      }
    },
    nextStep(step) {
      if (step > this.steps) {
        this.stepInfo.position = {
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          height: '320px',
        }
        this.$nextTick(() => {
          this.curStep = step
          this.setPosition()
          this.setStepElStyle(this.curStep <= this.steps)
          this.showMask = true
        })
      } else {
        if ([1, 2].includes(step)) {
          this.$router.push({
            name: 'JXGL_OTHER_PLAT_MANAGE',
          })
        } else if ([3, 4].includes(step)) {
          this.$router.push({
            name: 'JXGL_MOULD_MANAGE',
          })
        } else if ([5, 6].includes(step)) {
          this.$router.push({
            name: 'JXGL_ASSESS_MANAGE',
          })
        }
        this.$nextTick(() => {
          this.curStep = step
          this.setPosition()
          this.setStepElStyle(this.curStep <= this.steps)
          this.showMask = true
        })
      }
    },
    closeStep() {
      this.$store.commit('setLoginCount', this.loginCount + 1)
      this.showMask = false
      this.curStep = 1
      this.setPosition()
      this.setStepElStyle(false)
      this.stepInfo = this.stepsInfo[this.curStep]
    },
    restartStep() {
      this.curStep = 1
      this.nextStep(1)
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setPosition)
  },
}
</script>
<style lang="scss" scoped>
.page-guide {
  .help-step-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: rgba($color: #000000, $alpha: 0.25);
  }
}
</style>
